.cn-button {
  margin-top: -1.5em;
  margin-left: -1.5em;
  width: 3em;
  height: 3em; }

.cn-button.small {
  margin-top: -1em;
  margin-left: -1em;
  width: 2em;
  height: 2em; }

.cn-button.big {
  margin-top: -2em;
  margin-left: -2em;
  width: 4em;
  height: 4em; }

.cn-wrapper {
  margin-top: -7em;
  margin-left: -7em;
  width: 14em;
  height: 14em; }

.cn-wrapper.small {
  margin-top: -5.25em;
  margin-left: -5.25em;
  width: 10.5em;
  height: 10.5em; }

.cn-wrapper.big {
  margin-top: -8.75em;
  margin-left: -8.75em;
  width: 17.5em;
  height: 17.5em; }

.cn-wrapper li {
  margin-top: -2.6em;
  margin-left: -8em;
  width: 8em;
  height: 8em; }

.cn-wrapper.small li {
  margin-top: -1.6em;
  margin-left: -6em;
  width: 6em;
  height: 6em; }

.cn-wrapper.big li {
  margin-top: -3.5em;
  margin-left: -10em;
  width: 10em;
  height: 10em; }

.cn-wrapper li a {
  right: -4em;
  bottom: -4em;
  width: 8em;
  height: 8em; }

.cn-wrapper.small li a {
  right: -3.4em;
  bottom: -3em;
  width: 7.2em;
  height: 6.2em; }

.cn-wrapper.big li a {
  right: -5em;
  bottom: -5em;
  width: 10em;
  height: 10em; }

circular *, .circular * {
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  list-style: none;
  position: relative; }

circular, .circular {
  position: absolute;
  top: 100%;
  left: 50%; }

.cn-button {
  position: absolute;
  top: 100%;
  left: 50%;
  z-index: 11;
  padding-top: 0em;
  border: none;
  border-radius: 50%;
  background: none;
  background-color: #0A833D;
  color: #ffffff;
  text-align: center;
  font-weight: 700;
  font-size: 1.3em;
  text-transform: uppercase;
  cursor: pointer;
  -webkit-backface-visibility: hidden;
  outline: 0; }

.cn-wrapper {
  position: absolute;
  top: 100%;
  left: 50%;
  z-index: 10;
  border-radius: 50%;
  background: transparent;
  opacity: 0;
  -webkit-transition: all .3s ease 0.3s;
  -moz-transition: all .3s ease 0.3s;
  transition: all .3s ease 0.3s;
  -webkit-transform: scale(0.1);
  -ms-transform: scale(0.1);
  transform: scale(0.1);
  pointer-events: none;
  overflow: hidden; }

.opened-nav {
  border-radius: 50%;
  opacity: 1;
  -webkit-transition: all .3s ease;
  -moz-transition: all .3s ease;
  transition: all .3s ease;
  -webkit-transform: scale(1);
  -ms-transform: scale(1);
  transform: scale(1);
  pointer-events: auto; }

.cn-wrapper li {
  position: absolute;
  top: 50%;
  left: 50%;
  overflow: hidden;
  font-size: 1.3em;
  -webkit-transition: all .3s ease;
  -moz-transition: all .3s ease;
  transition: all .3s ease;
  -webkit-transform-origin: 100% 100%;
  transform-origin: 100% 100%;
  pointer-events: none; }

.cn-wrapper li a {
  position: absolute;
  display: block;
  border-radius: 50%;
  background: #0A833D;
  opacity: 0.7;
  color: #ffffff;
  text-align: center;
  text-decoration: none;
  font-size: 1.2em;
  line-height: 2.5;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  pointer-events: auto;
  cursor: pointer; }

.cn-wrapper li a.is-active {
  opacity: 1; }

.cn-wrapper li a:hover,
.cn-wrapper li a:active,
.cn-wrapper li a:focus {
  opacity: 0.9; }

.cn-wrapper li a.is-active:hover,
.cn-wrapper li a.is-active:active,
.cn-wrapper li a.is-active:focus {
  opacity: 0.9; }

.cn-wrapper li a span {
  position: relative;
  top: 1.8em;
  display: block;
  font-size: .5em;
  font-weight: 700;
  text-transform: uppercase; }

.opened-nav li {
  -webkit-transition: all .3s ease .3s;
  -moz-transition: all .3s ease .3s;
  transition: all .3s ease .3s; }

.item-odd-left-5, .opened-nav.items-11 li:first-child {
  -webkit-transform: rotate(-105deg) skew(60deg);
  -ms-transform: rotate(-105deg) skew(60deg);
  transform: rotate(-105deg) skew(60deg); }

.item-odd-left-4, .opened-nav.items-9 li:first-child, .opened-nav.items-11 li:nth-child(2) {
  -webkit-transform: rotate(-63deg) skew(60deg);
  -ms-transform: rotate(-63deg) skew(60deg);
  transform: rotate(-63deg) skew(60deg); }

.item-odd-left-3, .opened-nav.items-7 li:first-child, .opened-nav.items-9 li:nth-child(2), .opened-nav.items-11 li:nth-child(3) {
  -webkit-transform: rotate(-21deg) skew(60deg);
  -ms-transform: rotate(-21deg) skew(60deg);
  transform: rotate(-21deg) skew(60deg); }

.item-odd-left-2, .opened-nav.items-5 li:first-child, .opened-nav.items-7 li:nth-child(2), .opened-nav.items-9 li:nth-child(3), .opened-nav.items-11 li:nth-child(4) {
  -webkit-transform: rotate(11deg) skew(60deg);
  -ms-transform: rotate(11deg) skew(60deg);
  transform: rotate(11deg) skew(60deg); }

.item-odd-left-1, .opened-nav.items-3 li:first-child, .opened-nav.items-5 li:nth-child(2), .opened-nav.items-7 li:nth-child(3), .opened-nav.items-9 li:nth-child(4), .opened-nav.items-11 li:nth-child(5) {
  -webkit-transform: rotate(23deg) skew(60deg);
  -ms-transform: rotate(23deg) skew(60deg);
  transform: rotate(23deg) skew(60deg); }

.item-odd-center, .cn-wrapper li, .opened-nav.items-1 li:first-child, .opened-nav.items-3 li:nth-child(2), .opened-nav.items-5 li:nth-child(3), .opened-nav.items-7 li:nth-child(4), .opened-nav.items-9 li:nth-child(5), .opened-nav.items-11 li:nth-child(6) {
  -webkit-transform: rotate(75deg) skew(60deg);
  -ms-transform: rotate(75deg) skew(60deg);
  transform: rotate(75deg) skew(60deg); }

.item-odd-right-1, .opened-nav.items-3 li:nth-child(3), .opened-nav.items-5 li:nth-child(4), .opened-nav.items-7 li:nth-child(5), .opened-nav.items-9 li:nth-child(6), .opened-nav.items-11 li:nth-child(7) {
  -webkit-transform: rotate(127deg) skew(60deg);
  -ms-transform: rotate(127deg) skew(60deg);
  transform: rotate(127deg) skew(60deg); }

.item-odd-right-2, .opened-nav.items-5 li:nth-child(5), .opened-nav.items-7 li:nth-child(6), .opened-nav.items-9 li:nth-child(7), .opened-nav.items-11 li:nth-child(8) {
  -webkit-transform: rotate(139deg) skew(60deg);
  -ms-transform: rotate(139deg) skew(60deg);
  transform: rotate(139deg) skew(60deg); }

.item-odd-right-3, .opened-nav.items-7 li:nth-child(7), .opened-nav.items-9 li:nth-child(8), .opened-nav.items-11 li:nth-child(9) {
  -webkit-transform: rotate(171deg) skew(60deg);
  -ms-transform: rotate(171deg) skew(60deg);
  transform: rotate(171deg) skew(60deg); }

.item-odd-right-4, .opened-nav.items-9 li:nth-child(9), .opened-nav.items-11 li:nth-child(10) {
  -webkit-transform: rotate(213deg) skew(60deg);
  -ms-transform: rotate(213deg) skew(60deg);
  transform: rotate(213deg) skew(60deg); }

.item-odd-right-5, .opened-nav.items-11 li:nth-child(11) {
  -webkit-transform: rotate(235deg) skew(60deg);
  -ms-transform: rotate(235deg) skew(60deg);
  transform: rotate(235deg) skew(60deg); }

.item-even-left-5, .opened-nav.items-10 li:first-child {
  -webkit-transform: rotate(-69deg) skew(60deg);
  -ms-transform: rotate(-69deg) skew(60deg);
  transform: rotate(-69deg) skew(60deg); }

.item-even-left-4, .opened-nav.items-8 li:first-child, .opened-nav.items-10 li:nth-child(2) {
  -webkit-transform: rotate(-37deg) skew(60deg);
  -ms-transform: rotate(-37deg) skew(60deg);
  transform: rotate(-37deg) skew(60deg); }

.item-even-left-3, .opened-nav.items-6 li:first-child, .opened-nav.items-8 li:nth-child(2), .opened-nav.items-10 li:nth-child(3) {
  -webkit-transform: rotate(-5deg) skew(60deg);
  -ms-transform: rotate(-5deg) skew(60deg);
  transform: rotate(-5deg) skew(60deg); }

.item-even-left-2, .opened-nav.items-4 li:first-child, .opened-nav.items-6 li:nth-child(2), .opened-nav.items-8 li:nth-child(3), .opened-nav.items-10 li:nth-child(4) {
  -webkit-transform: rotate(27deg) skew(60deg);
  -ms-transform: rotate(27deg) skew(60deg);
  transform: rotate(27deg) skew(60deg); }

.item-even-left-1, .opened-nav.items-2 li:first-child, .opened-nav.items-4 li:nth-child(2), .opened-nav.items-6 li:nth-child(3), .opened-nav.items-8 li:nth-child(4), .opened-nav.items-10 li:nth-child(5) {
  -webkit-transform: rotate(59deg) skew(60deg);
  -ms-transform: rotate(59deg) skew(60deg);
  transform: rotate(59deg) skew(60deg); }

.item-even-right-1, .opened-nav.items-2 li:nth-child(2), .opened-nav.items-4 li:nth-child(3), .opened-nav.items-6 li:nth-child(4), .opened-nav.items-8 li:nth-child(5), .opened-nav.items-10 li:nth-child(6) {
  -webkit-transform: rotate(91deg) skew(60deg);
  -ms-transform: rotate(91deg) skew(60deg);
  transform: rotate(91deg) skew(60deg); }

.item-even-right-2, .opened-nav.items-4 li:nth-child(4), .opened-nav.items-6 li:nth-child(5), .opened-nav.items-8 li:nth-child(6), .opened-nav.items-10 li:nth-child(7) {
  -webkit-transform: rotate(123deg) skew(60deg);
  -ms-transform: rotate(123deg) skew(60deg);
  transform: rotate(123deg) skew(60deg); }

.item-even-right-3, .opened-nav.items-6 li:nth-child(6), .opened-nav.items-8 li:nth-child(7), .opened-nav.items-10 li:nth-child(8) {
  -webkit-transform: rotate(155deg) skew(60deg);
  -ms-transform: rotate(155deg) skew(60deg);
  transform: rotate(155deg) skew(60deg); }

.item-even-right-4, .opened-nav.items-8 li:nth-child(8), .opened-nav.items-10 li:nth-child(9) {
  -webkit-transform: rotate(187deg) skew(60deg);
  -ms-transform: rotate(187deg) skew(60deg);
  transform: rotate(187deg) skew(60deg); }

.item-even-right-5, .opened-nav.items-10 li:nth-child(10) {
  -webkit-transform: rotate(219deg) skew(60deg);
  -ms-transform: rotate(219deg) skew(60deg);
  transform: rotate(219deg) skew(60deg); }

.cn-wrapper li a {
  -webkit-transform: skew(-60deg) rotate(-75deg) scale(1);
  -ms-transform: skew(-60deg) rotate(-75deg) scale(1);
  transform: skew(-60deg) rotate(-75deg) scale(1); }
